<!-- 排水系统 -->
<template>
  <div class="water">
    <div class="water-wrap">
      <div class="box" v-for="(value, index) in waterData" :key="index">
        <el-popover placement="top" :title="value.Name" width="900" trigger="hover">
          <div style="width: 900px;display: flex;flex-wrap: wrap;">
            <p style="width: 900px; font-size: 14px; color: #fff; border-bottom: 1px solid #456e9b;">模拟量</p>
            <p class="popover-space">
              <span>水泵名称</span>
              <span class="bai">{{value.V}}</span>
            </p>
            <p class="popover-space">
              <span>水位</span>
              <span class="bai">{{value.An}}</span>
            </p>
            <p class="popover-space">
              <span>流量</span>
              <span class="bai">{{value.Speed}}</span>
            </p>
            <p class="popover-space">
              <span>管路压力</span>
              <span class="bai">{{value.Speed}}</span>
            </p>
            <p class="popover-space">
              <span>真空泵负压</span>
              <span class="bai">{{value.Speed}}</span>
            </p>
            <p class="popover-space">
              <span>水泵轴承温度</span>
              <span class="bai">{{value.Speed}}</span>
            </p>
            <p class="popover-space">
              <span>电机绕组温度</span>
              <span class="bai">{{value.Speed}}</span>
            </p>
            <p class="popover-space">
              <span>振动</span>
              <span class="bai">{{value.Speed}}</span>
            </p>
            <p class="popover-space">
              <span>电流</span>
              <span class="bai">{{value.Speed}}</span>
            </p>
            <p class="popover-space">
              <span>电压</span>
              <span class="bai">{{value.Speed}}</span>
            </p>
            <p class="popover-space">
              <span>功率</span>
              <span class="bai">{{value.Speed}}</span>
            </p>
            <p class="popover-space">
              <span>排水量</span>
              <span class="bai">{{value.Speed}}</span>
            </p>
          </div>
          <div style="width: 900px;display: flex;flex-wrap: wrap;">
            <p style="width: 900px; font-size: 14px; color: #fff;  border-bottom: 1px solid #456e9b;">开关量</p>
            <p class="popover-space">
              <span>水泵开关状态</span>
              <!-- <span class="bai">{{value.PumpSwitch? '开':'关'}}</span> -->
              <span :class="value.PumpSwitch? 'on':'off'"></span>
            </p>
            <p class="popover-space">
              <span>阀门开关状态</span>
              <span class="bai">{{value.Speed}}</span>
            </p>
            <p class="popover-space">
              <span>真空泵开关状态</span>
              <span class="bai">{{value.Speed}}</span>
              <span :class="statusleave[value.WarningLevel] + '_color'"></span>
            </p>
            <p class="popover-space">
              <span>防水门开关状态</span>
              <span class="bai">{{value.WarningMessage}}</span>
            </p>
            <p class="popover-space">
              <span>水泵运行时间</span>
              <span class="bai">{{value.WarningMessage}}</span>
            </p>
            <p class="popover-space">
              <span>报警状态</span>
              <span class="bai">{{value.WarningLevel}}</span>
              <span :class="statusleave[value.WarningLevel] + '_color'"></span>
            </p>
            <p class="popover-space">
              <span>报警消息</span>
              <span class="bai">{{value.WarningMessage}}</span>
            </p>
          </div>
          <img slot="reference"
            :src="value.PumpSwitch === true ? `./static/water/green_${index}.png` : value.PumpSwitch === false ? `./static/water/red_${index}.png` : `./static/water/gray_${index}.png`">
        </el-popover>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    pumpList
  } from "../server/api.js";
  export default {
    data() {
      return {
        ind: 0,
        timer: null,
        waterData: [],
        // 0正常  1预警  2报警
        statusleave: [
          'green', 'orange', 'red'
        ]
      };
    },
    created() {
      this.init();
    },
    mounted() {
      const timer = setInterval(() => {
        this.init();
      }, 5000);
      this.$once("hook:beforeDestroy", () => clearInterval(timer));
    },
    methods: {
      async init() {
        const res = await pumpList();
        this.waterData = res.data.data;
        console.log(this.waterData)
      },
    },
  };

</script>

<style lang="scss" scoped>
  .water {
    width: 100%;
    height: calc(100vh - 120px);
    padding: 0px 0px;
    position: relative;

    .water-wrap {
      width: 3350px;
      position: absolute;
      bottom: 0;
      overflow: hidden;

      .box {
        display: inline-block;
        font-size: 0;
        float: left;
        text-align: bottom;
      }
    }
  }


.popover-space {
  width: 180px !important; 
  margin-left: 10px !important;
}
</style>
